<!-- 字典数据 -->
<template>
  <div>
    <el-dialog
      title="字典数据"
      :visible.sync="isShowDialog"
      width="70%"
      :before-close="closeDialog"
      size="mini"
    >
      <div class="dict-sear" v-if="isShowSear">
        <el-form size="mini" inline>
          <el-form-item label="关键字">
            <el-input
              placeholder="关键字检索(名称)"
              v-model="searParams.keyword"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建人">
            <el-select
              v-model="searParams.createBy"
              size="mini"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in createByList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-select
              v-model="searParams.enable"
              size="mini"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in enableList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-button size="mini" type="primary" @click="exeSear"
            >查询</el-button
          >
          <el-button size="mini" @click="initSearParams()">重置</el-button>
        </el-form>
      </div>
      <div class="dict-oper">
        <div class="dict-oper-left">
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-plus"
            @click="preAdd()"
            >新增</el-button
          >
          <el-button
            type="success"
            size="mini"
            plain
            icon="el-icon-edit"
            @click="modifyBatch()"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            plain
            icon="el-icon-delete"
            @click="removeBatch"
          >
            删除</el-button
          >
        </div>
        <div class="dict-oper-right">
          <el-button
            icon="el-icon-search"
            size="mini"
            circle
            @click="isShowSear = !isShowSear"
          ></el-button>
          <el-button
            icon="el-icon-refresh"
            size="mini"
            circle
            @click="exeSear()"
          ></el-button>
        </div>
      </div>
      <div class="dict-list">
        <el-table
          stripe
          highlight-current-row
          v-if="isRefreshTable"
          :data="dictDataPage.list"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          :default-expand-all="isExpand"
          tooltip-effect="dark"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          @selection-change="modifySelect"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <!-- <el-table-column prop="id" label="ID" sortable width="180">
      </el-table-column> -->
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="value" label="值"> </el-table-column>
          <el-table-column prop="createTenant" label="创建人">
            <template slot-scope="scope">
              {{ scope.row.createTenant.username }}
            </template>
          </el-table-column>
          <el-table-column
            prop="level"
            label="是否启用"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.enable"
                active-value="1"
                inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                @change="modifyEnable(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="sort"
            label="排序值"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.sort"
                @change="modifySort(scope.row)"
                :max="99"
                :min="0"
              />
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="modifySingle(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="removeSingle(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="page"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="dictDataPage.totalCount"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="dictDataPage.pageSize"
          @current-change="modifyOffset"
          @size-change="modifyLimit"
        >
        </el-pagination>
      </div>
    </el-dialog>
    <AddComp
      v-if="isShowAdd"
      :enables="enableList"
      :type="data.id"
      @close="closeAdd"
      @submit="submitAdd"
    />
    <EditComp
      v-if="isShowEdit"
      :enables="enableList"
      :type="data.id"
      :data="singleData"
      @close="closeEdit"
      @submit="submitEdit"
    />
  </div>
</template>

<script>
import {
  list,
  listCreateBy,
  queryById,
  change,
  create,
  deleteByIds,
} from "@/api/dictData";
import { isNotEmpty, isEmpty, isNotNull, isNull } from "@/utils/validate";
import { DICT_TYPE } from "@/utils/dict";
import AddComp from "./data/addComp.vue";
import EditComp from "./data/editComp.vue";
export default {
  props: {
    data: {
      type: Object,
    },
  },
  components: {
    AddComp,
    EditComp,
  },
  data() {
    return {
      isShowSear: true,
      isShowDialog: true,
      isShowAdd: false,
      isShowEdit: false,
      isRefreshTable: true,
      isExpand: true,
      searParams: {},
      enableList: [],
      createByList: [],
      dictDataPage: {},
      selectItems: [],
      selectIds: [],
    };
  },
  created() {
    this.initSearParams();
    this.exeSear();
    this.listCreateBy();
    this.getEnable();
  },
  mounted() {},
  methods: {
    /**
     * 关闭字典数据
     */
    closeDialog() {
      this.$emit("close");
    },
    /**
     * 初始化检索数据
     */
    initSearParams() {
      this.searParams = {
        offset: 1,
        limit: 5,
        dictTypeId: this.data.id,
      };
    },
    /**
     * 查询启用/禁用
     */
    getEnable() {
      this.$store.dispatch("dict/getByType", DICT_TYPE.ENABLE).then((res) => {
        if (res.code === 0) {
          this.enableList = res.data;
        }
      });
    },
    /**
     * 查询创建人列表
     */
    listCreateBy() {
      listCreateBy().then((res) => {
        if (res.code === 0 && res.data != null) {
          this.createByList = res.data;
        }
      });
    },
    /**
     * 执行搜索
     */
    exeSear() {
      list(this.searParams).then((res) => {
        if (res.code === 0) {
          this.dictDataPage = res.data;
        }
      });
    },
    /**
     * 页码改变
     */
    modifyOffset(val) {
      this.searParams.offset = val;
      this.exeSear();
    },
    /**
     * 页数改变
     */
    modifyLimit(val) {
      this.searParams.limit = val;
      this.exeSear();
    },
    /**
     * 修改启用状态
     */
    modifyEnable(val) {
      this.doModify({
        id: val.id,
        enable: val.enable,
      });
    },
    /**
     * 修改排序值
     */
    modifySort(val) {
      this.doModify({
        id: val.id,
        sort: val.sort,
      });
    },
    /**
     * 单修
     */
    modifySingle(val) {
      this.preModify([val]);
    },
    /**
     * 批修
     */
    modifyBatch() {
      this.preModify(this.selectItems);
    },
    /**
     * 预修改
     */
    preModify(dictDataForms) {
      if (dictDataForms == null || dictDataForms.length != 1) {
        this.$message({
          message: "请选择一条记录",
          type: "warning",
        });
        return;
      }
      const dictTypeForm = dictDataForms[0];
      queryById(dictTypeForm.id).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.getEnable();
          this.singleData = res.data;
          this.isShowEdit = true;
        } else {
          this.$message.error("同步字典数据失败");
        }
      });
    },
    /**
     * 关闭修改对话框
     */
    closeEdit() {
      this.isShowEdit = false;
    },
    /**
     * 提交修改
     */
    submitEdit(dictDataForm) {
      this.doModify(dictDataForm);
    },
    /**
     * 执行修改
     */
    doModify(val) {
      change(val).then((res) => {
        if (res.code === 0) {
          this.exeSear();
          this.isShowEdit = false;
          this.$message({
            message: "修改字典数据成功",
            type: "success",
          });
        } else {
          this.$message.error("修改字典数据失败");
        }
      });
    },
    /**
     * 表格选择改变
     */
    modifySelect(val) {
      this.selectItems = [];
      this.selectIds = [];
      for (let i = 0; i < val.length; i++) {
        this.selectItems.push(val[i]);
        this.selectIds.push(val[i].id);
      }
    },
    /**
     * 单删
     */
    removeSingle(val) {
      this.doRemove([val.id]);
    },
    /**
     * 批删
     */
    removeBatch() {
      this.doRemove(this.selectIds);
    },
    /**
     * 执行删除
     */
    doRemove(dictDataIds) {
      if (isEmpty(dictDataIds)) {
        this.$message("未选中字典数据");
        return;
      }
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteByIds(dictDataIds).then((res) => {
            if (res.code === 0) {
              this.exeSear();
              this.$message({
                message: "删除字典数据成功",
                type: "success",
              });
            } else {
              this.$message.error("删除字典数据失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 关闭添加对话框
     */
    closeAdd() {
      this.isShowAdd = false;
    },
    /**
     * 预添加
     */
    preAdd() {
      this.isShowAdd = true;
      this.getEnable();
    },
    /**
     * 提交创建
     */
    submitAdd(dictDataFrom) {
      create(dictDataFrom).then((res) => {
        if (res.code === 0 && res.data) {
          this.exeSear();
          this.isShowAdd = false;
          this.$message({
            message: "添加字典数据成功",
            type: "success",
          });
        } else {
          this.$message.error("添加字典数据失败");
        }
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>